<template>
  <div>
    <div class="index-NavBar">
      <van-nav-bar class="index-NavBar-content">
        <template #left>
          <div class="index-NavBar-content-location">
            <van-icon class="index-NavBar-content-location-icon" size="1.25rem" name="location"/>
            <span>{{location}}</span>
          </div>
        </template>
        <template #title>
          <van-search shape="round" background="none" placeholder="请输入关键词"></van-search>
        </template>
        <template #right>
          <van-image
            width="1.875rem"
            round='true'
            :src="userPic"
          />
        </template>
      </van-nav-bar>
    </div>
    <div class="index-Swipe">
      <van-swipe :autoplay="3000">
        <van-swipe-item :key="index" v-for="(item,index) in banners" lazy-render>
          <van-image class="index-Swipe-item-img" :src="item.imageUrl"></van-image>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="index-tags">
      <van-cell-group class="index-tags-cellGroup">
        <van-cell class="index-tags-cell">
          <template #value>
            <van-row class="index-tags-cell-row" :wrap="false">
              <van-col span="5" v-for="(item,index) in userHobby" :key="index">
                <van-tag size="large" round color="orange" closeable>{{item}}</van-tag>
              </van-col>
            </van-row>
          </template>
          <template #right-icon>
            <div class="index-tags-cell-button" @touchend="toHobbyPage">
              <van-icon name="arrow"/>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="index-navBlock">
      <van-grid class="index-navBlock-content" square :gutter="10">
        <van-grid-item class="index-navBlock-content-item" icon="like" icon-color="#FF4D4F" text="Lik"></van-grid-item>
        <van-grid-item class="index-navBlock-content-item" icon="location" icon-color="#40A9FF" text="Dis"></van-grid-item>
        <van-grid-item class="index-navBlock-content-item" icon="medal" icon-color="#FADB14" text="Top"></van-grid-item>
        <van-grid-item class="index-navBlock-content-item" icon="clock" icon-color="#73D13D" text="Rel"></van-grid-item>
      </van-grid>
    </div>
    <!-- <div class="index-activity">
      <ActivityBlock/>
    </div> -->
    <div class="index-cards">
      <Card class="index-cards-item">
        <template #left>
          <div class="index-cards-item-tabs">
            <van-tabs class="index-cards-item-tabs" v-model:active="activeContent" background="none">
              <van-tab name="1" title="文章"></van-tab>
              <van-tab name="2" title="视频"></van-tab>
            </van-tabs>
          </div> 
        </template>
        <template #right>
          <van-icon name="arrow"/>
        </template>
        <div class="index-cards-item-content">
          <div :class="{'index-cards-item-content-active':activeContent == 1,'index-cards-item-content-item':true}">
            <Blog
              :author="item.author"
              :content="item.content.text"
              :title="item.title"
              :tag="item.tag"
              :like="item.like"
              :comment="item.comment"
              :date="item.date"
              :coverUrl="item.coverUrl"
              :key="key"
              v-for="(item,key) in articles"
              @click="checkCardsDetail(item)"
            />
            <!-- <Blog
              :userInfo="userInfo"
              :article="article"
            /> -->
          </div>
          <div :class="{'index-cards-item-content-active':activeContent == 2,'index-cards-item-content-item':true}">
            <div class="index-cards-item-content-video">
              <div>
                <Vlog
                  v-for="(item,index) in videos" :key="index" v-show="index % 2 == 0"
                  :title="item.title"
                  :author="item.author"
                  :coverUrl="item.coverUrl"
                  :tag="item.tag"
                  @click="checkVideoDetail(item)"
                />
              </div>
              <div>
                <Vlog
                  v-for="(item,index) in videos" :key="index" v-show="index % 2 != 0"
                  :title="item.title"
                  :author="item.author"
                  :coverUrl="item.coverUrl"
                  :tag="item.tag"
                  @click="checkVideoDetail(item)"
                />
              </div>
            </div>
          </div>
        </div>
      </Card>
      <Card class="index-cards-item">
        <template #left>
          <span class="index-cards-item-title">社团</span>
        </template>
        <template #right>
          <van-icon name="arrow"/>
        </template>
        <div class="index-cards-item-content">
          <!-- <div class="index-cards-item-content-club">
            <Club :clubInfo="clubInfo"/>
          </div>
          <div class="index-cards-item-content-club">
            <Club :clubInfo="clubInfo"/>
          </div> -->
          <club 
            v-for="(item,index) in club"
            @click="checkClubDetail(item)"
           :key="index"
           :clubName="item.clubName"
           :clubDesc="item.clubDesc"
           :clubCover="item.clubCover"
           :clubTag="item.clubTag"
           :clubMemberInfo="item.clubMemberInfo"

          />
        </div>
      </Card>
    </div>
    <van-popup v-model:show="cardsDetailShow" position="bottom">
      <div class="index-cardsDetail">
        <div class="index-cardsDetail-navBar">
          <van-nav-bar title="文章" left-arrow @click-left="backStep"/>
        </div>
        <van-skeleton :loading="loading" style="marginBottom:20px;textAlign:center">
          <div class="index-cardsDetail-title">
            <h1>{{cardsDetailData.title}}</h1>
          </div>
        </van-skeleton>
        <van-skeleton avatar :row="2" :loading="loading" style="marginBottom:20px">
          <div class="index-cardsDetail-author">
            <div class="index-cardsDetail-author-headPic">
              <van-image
                width="50px"
                round='true'
                :src="cardsDetailData.author.userImgUrl"
              />
            </div>
            <div class="index-cardsDetail-author-info">
              <p class="index-cardsDetail-author-info-name">{{cardsDetailData.author.userName}}</p>
              <p class="index-cardsDetail-author-info-level">{{cardsDetailData.author.userDesc}}</p>
            </div>
            <div class="index-cardsDetail-author-follow">
              <div class="followButton">
                <span>+ 关注</span>
              </div>
            </div>
          </div>
        </van-skeleton>
        <van-skeleton :row="5" :loading="loading" style="marginBottom:20px">
          <div class="index-cardsDetail-cover">
            <img :src="cardsDetailData.coverUrl">
          </div>
        </van-skeleton>
        <van-skeleton :row="10" title :loading="loading">
          <div class="index-cardsDetail-content">
            <div class="editor-content-view" v-html="cardsDetailData.content.html">
            </div>
          </div>
          <div class="index-cardsDetail-tag">
            <div class="index-cardsDetail-tag-icon">
              <van-icon class-prefix="aliIconfont" name="icon-biaoqian" size="25px"/>
            </div>
            <div class="index-cardsDetail-text">
              {{cardsDetailData.tag}}
            </div>
          </div>
        </van-skeleton>
      </div>
    </van-popup>
    <van-popup v-model:show="videoDetailShow" position="bottom">
      <div class="index-videoDetail">
        <video class="videoElem" @click="handleControl" ref="videoElem" :src="videoDetailDate.videoUrl" autoplay loop>
        </video>
        <div class="index-videoDetail-backStep" @click="backStepVideo">
          <van-icon class-prefix="aliIconfont" size="40px" name="icon-jiantou_qiehuanzuo"/>
        </div>
        <div class="index-videoDetail-funcs">
          <ul>
            <li class="index-videoDetail-funcs-author">
              <van-image width="50px" height="50px" round="true" :src="videoDetailDate.author.userImgUrl"/>
            </li>
            <li>
              <van-icon class-prefix="aliIconfont" size="40px" name="icon-dianzan_kuai"/>
              <p>{{videoDetailDate.like}}</p>
            </li>
            <li>
              <van-icon class-prefix="aliIconfont" size="40px" name="icon-xiaoxi"/>
              <p>{{videoDetailDate.like}}</p>
            </li>
            <li>
              <van-icon class-prefix="aliIconfont" size="40px" name="icon-arrow-"/>
              <p>0</p>
            </li>
          </ul>
        </div>
        <div class="index-videoDetail-bottom">
          <h3>{{videoDetailDate.title}}</h3>
          <p>
            {{videoDetailDate.desc}}
          </p>
        </div>
        <div :class="{'index-videoDetail-icon':true,'index-videoDetail-icon-action':isStop}" @click="handleControl">
          <van-icon class-prefix="aliIconfont" size="90px" name="icon-bofang2"/>
        </div>
      </div>
    </van-popup>
    <van-popup v-model:show="clubDetailShow" position="bottom" closeable round close-icon-position="top-left">
      <ClubDetail @handleJoinSuccess="handleJoinSuccess" :detailData="clubDetailData"/>
    </van-popup>
  </div>
</template>
<script>
import { 
  NavBar, DropdownMenu, DropdownItem, Search, Image as VanImage, 
  Swipe,SwipeItem, Cell, CellGroup, Icon, Col, Row, Tag, Grid, 
  GridItem, Tab, Tabs, Popup, Skeleton
} from "vant";
import Card from "@/components/Card.vue";
/* import ActivityBlock from "./components/activityBlock.vue"; */
import Vlog from "@/components/Vlog";
import Blog from "@/components/Blog";
import Club from "@/components/Club";
import ClubDetail from "@/components/ClubDetail"
import { onMounted, ref } from '@vue/runtime-core';
import { getBanner, getUserData,getArticles, getVideos, getClub } from "@/service/user";
import { useStore } from "vuex";
export default {
  setup(){
    const banners = ref('');
    const userHobby = ref('');
    const articles = ref([]);
    const videos = ref([]);
    const club = ref([])
    const store = useStore();
    onMounted(()=>{
      getBanner().then(res=>{
        banners.value = res
      })
      getUserData().then(res=>{
        userHobby.value = res.hobby;
        store.commit('setUserHobby',res.hobby);
      })
      getArticles().then(res=>{
        articles.value = res;
      });
      getVideos().then(res=>{
        videos.value = res;
      })
      getClub().then(res=>{
        club.value = res;
      })
    })
    return {
      banners,
      userHobby,
      articles,
      videos,
      club
    }
  },
  mounted(){
    this.$store.dispatch('getLocation');
    getUserData().then(res=>{
      this.userPic = res.userImgUrl;
    })
  },
  computed:{
    location(){
      return this.$store.state.location
    }
  },
  components:{
    [NavBar.name]: NavBar,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Search.name]: Search,
    [VanImage.name]: VanImage,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    [Col.name]: Col,
    [Row.name]: Row,
    [Tag.name]: Tag,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Popup.name]: Popup,
    [Skeleton.name]: Skeleton,
    Card,
    /* ActivityBlock, */
    Blog,
    Club,
    Vlog,
    ClubDetail
},
  data(){
    return {
      activeContent:1,
      cardsDetailShow:false,
      videoDetailShow:false,
      clubDetailShow:false,
      cardsDetailData:{},
      videoDetailDate:{},
      clubDetailData:{},
      loading:true,
      isStop:false,
      userPic:""
    }
  },
  methods:{
    toHobbyPage(){
      this.$router.push('/hobby');
    },
    checkCardsDetail(data){
      this.cardsDetailShow=true;
      this.cardsDetailData=data;
      setTimeout(()=>{
        this.loading = false;
      },1000)
    },
    checkVideoDetail(data){
      this.videoDetailShow=true;
      this.videoDetailDate=data;
    },
    checkClubDetail(data){
      this.clubDetailShow = true;
      this.clubDetailData=data;
    },
    backStep(){
      this.cardsDetailShow = false;
      this.loading = true;
      this.cardsDetailData = {};
    },
    backStepVideo(){
      this.videoDetailShow = false;
      this.isStop = false;
      /* this.videoDetailDate = {}; */
    },
    handleControl(){
      if(!this.$refs.videoElem.paused){
        this.$refs.videoElem.pause();
        this.isStop = true;
      }else{
        this.$refs.videoElem.play();
        this.isStop = false;
      }
    },
    handleJoinSuccess(id){
      getClub().then(res=>{
        this.club = res;
        this.clubDetailData = res.filter(item=>item._id == id)[0];
      })
    }
  }
}
</script>
<style lang="less">
.index-NavBar{
  .index-NavBar-content{
    background: #FFE7BA;
    .index-NavBar-content-location{
      .index-NavBar-content-location-icon{
        vertical-align: top;
      }
    }
    
    .index-NavBar-content-DragDown{
      >.van-dropdown-menu__bar{
        background: none;
        box-shadow: none;
      }
    }
  }
}
.index-Swipe{
  .index-Swipe-item-img{
    overflow: hidden;
  }
}
.index-tags{
  .index-tags-cellGroup{
    .index-tags-cell{
      background: #FFE7BA;
      .index-tags-cell-row{
        overflow-x: auto;
        overflow: -moz-scrollbars-none;
        -ms-overflow-style: none;
        &::-webkit-scrollbar{
          width: 0;
          height: 0;
        }
      }
      .index-tags-cell-button{
        padding-left: .3125rem;
      }
    }
  }
}
.index-navBlock{
  .index-navBlock-content{
    margin: .3125rem 0 0 0;
    .index-navBlock-content-item{
      &:nth-child(1){
        >div{
          background: #FFA39E;
          border-radius: .9375rem;
        }
      }
      &:nth-child(2){
        >div{
          background: #91D5FF;
          border-radius: .9375rem;
        }
      }
      &:nth-child(3){
        >div{
          background: #FFF566;
          border-radius: .9375rem;
        }
      }
      &:nth-child(4){
        >div{
          background: #B7EB8F;
          border-radius: .9375rem;
        }
      }
      .van-icon{
        text-shadow:2px 2px 2px #999;
        &::before{
          margin-bottom: 1.875rem;
          font-size: 2.8125rem;
        }
      }
      .van-grid-item__text{
        color:white;
        position: absolute;
        font-size: 1.875rem;
        font-weight: bolder;
        top: 40%;
        text-shadow: 2px 2px 2px #999;
      }
    }
  }
}
.index-activity{
  margin: 0 .625rem;
}
.index-cards{
  .index-cards-item{
    margin: .625rem 0;
    >.diy_card_header{
      background:#FFE7BA;
      border-radius: .625rem .625rem 0 0;
      position: relative;
      &::after{
        content:"";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height:.625rem;
        box-shadow: 0 .25rem .25rem #999;
      }
    }
    .index-cards-item-tabs{
      .van-tab{
        font-size: 1.5625rem;
        line-height: initial;
        padding: 0 .3125rem;
      }
    }
    .index-cards-item-content{
      > .index-cards-item-content-item{
        display: none;
      } 
      > .index-cards-item-content-club{
        margin-bottom: .625rem;
        border-radius: 0 0 .625rem .625rem;
        overflow: hidden;
        box-shadow: .125rem .125rem .125rem #999;
      }
    }
    .index-cards-item-content-active{
      display: block!important;;
      .index-cards-item-content-video{
        display: flex;
        justify-content: center;
        margin: 0 -12px;
        >div{
          margin:0 8px;
          width: 45%;
          >div{
            margin-bottom:12px;
          }
        }
      }
    }
    .diy_card_content{
      background: #FFE7BA;
    }
  }
  .index-cards-item-title{
    height: 2.75rem;
    line-height: 2.75rem;
    font-size: 1.5625rem;
  }
}
.index-cardsDetail{
  height:100vh;
  margin: 0 8px;
  .index-cardsDetail-author{
    display: flex;
    align-items:center;
    margin-bottom: 20px;
    .index-cardsDetail-author-info{
      flex: 1;
      >p{
        margin: 0 .625rem;
        text-align: left;
      }
      .index-cardsDetail-author-info-name{
        font-size: 1.125rem;
        font-weight: bolder;
      }
    }
    .index-cardsDetail-author-follow{
      .followButton{
        width: 80px;
        background: orange;
        color: white;
        font-weight: 600;
        padding: 6px 0;
        border-radius: 5px;
      }
    }
  }
  .index-cardsDetail-cover{
    width: 100%;
    max-height: 230px;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .index-cardsDetail-content{
    margin:8px 0;
  }
  .index-cardsDetail-tag{
    padding: 8px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .index-cardsDetail-text{
      margin: 0 8px;
      padding:4px 8px;
      background: silver;
      color: darkblue;
      border-radius: 5px;
    }
  }
}
.index-videoDetail{
    width: 100%;
    height: 100vh;
    background: black;
    color: rgba(255, 255, 255, 0.767);
    display: flex;
    position: relative;
    video{
      width:100%;
    }
    .index-videoDetail-backStep{
      position: absolute;
      margin: 12px;
      top:0;
      left: 0;
      text-shadow:0 0 4px rgba(0, 0, 0, 0.5);
    }
    .index-videoDetail-funcs{
      margin:0 12px;
      position:absolute;
      right:0;
      top:50%;
      transform:translateY(-50%);
      text-shadow: 0 4px 4px 4px rgba(0, 0, 0, 0.5);
      ul{
        margin: 0;
        padding:0;
        li{
          margin-bottom:20px;
          p{
            margin:0;
            padding:0;
          }
        }
      }
    }
    .index-videoDetail-bottom{
      position:absolute;
      bottom:0;
      text-align: left;
      padding: 16px;
      background: linear-gradient(0deg, #0000007a, transparent);
      h3,p{
        margin:0;
        padding:0
      }
    }
    .index-videoDetail-icon{
      position:absolute;
      top: 50%;
      left:50%;
      transition-property: transform;
      transition-duration: .5s;
      transform:translate(-50%,-50%) scale(0)
    }
    .index-videoDetail-icon-action{
      transform:translate(-50%,-50%) scale(1)
    }
    .index-videoDetail-funcs-author{
      position: relative;
      margin-bottom: 28px!important;
      &::after{
        position: absolute;
        content: '+';
        bottom: -10px;
        left: 50%;
        width: 25px;
        height: 25px;
        transform: translateX(-50%);
        background: red;
        text-align: center;
        line-height: 30px;
        font-size: 30px;
        border-radius: 50%;
      }
    }
  }
</style>